<template>
  <div class="work-data">
    <div class="work-summary">
      <div class="summary-header">
        <h3>作品总结</h3>
        <el-button type="text" @click="changeSummary()">{{
          isSummary ? "收起" : "展开查看"
        }}</el-button>
      </div>
      <div class="summary" v-show="isSummary">
        <ul>
          <li v-for="item in workSummaryList" :key="item.worksId">
            <div class="production-left"><img :src="item.coverPath" /></div>
            <div class="production-right">
              <div class="production-title">
                <span
                  :class="[counts]"
                  v-for="(counts, index) in item.labelList"
                  :key="index"
                  >{{ counts | countsFilter }}</span
                >
                <div>
                  {{ item.worksDesc
                  }}<template v-for="topic in item.topicList">
                    #{{ topic.topicTitle }}</template
                  >
                </div>
              </div>
              <div class="production-icon">
                <div>
                  <i class="el-icon-caret-right"></i>
                  <p>{{ item.playCounts }}</p>
                </div>
                <div>
                  <i class="iconfont icon-point-like"></i>
                  <p>{{ item.likeCounts }}</p>
                </div>
                <div>
                  <i class="iconfont icon-informessage"></i>
                  <p>{{ item.commentCounts }}</p>
                </div>
                <div>
                  <i class="iconfont icon-user"></i>
                  <p>{{ item.collectCounts }}</p>
                </div>
              </div>
              <div class="production-time">发布时间: {{ item.updateTime }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="work-table">
      <div class="table-header">
        <h3>
          作品列表
          <el-popover
            placement="right-start"
            width="200"
            trigger="hover"
            class="table-popover"
            content="展示最近30天最新发布的100个作品，3天内发布的新作品，数据实时更新；超出3天的历史作品，按天更新。指数是对同粉丝量级同类型作品的对比计算得出。共创作品数据暂未包含在内。"
          >
            <el-button slot="reference" icon="el-icon-question"></el-button>
          </el-popover>
        </h3>

        <el-button
          type="info"
          size="small"
          icon="el-icon-tickets"
          plain
          @click="changePattern()"
          >{{ pattern ? "卡片模式" : "列表模式" }}</el-button
        >
      </div>
      <div class="sort-method">
        <el-button
          type="text"
          :class="[showContent == 1 ? 'activeButton' : '']"
          @click="handleRange(1)"
          >按发布时间</el-button
        >
        <el-button
          type="text"
          :class="[showContent == 2 ? 'activeButton' : '']"
          @click="handleRange(2)"
          >按播放量</el-button
        >
        <el-button
          type="text"
          :class="[showContent == 3 ? 'activeButton' : '']"
          @click="handleRange(3)"
          >按点赞数</el-button
        >
        <el-button
          type="text"
          :class="[showContent == 4 ? 'activeButton' : '']"
          @click="handleRange(4)"
          >按收藏数</el-button
        >
        <el-button
          type="text"
          :class="[showContent == 5 ? 'activeButton' : '']"
          @click="handleRange(5)"
          >按评论数</el-button
        >

        <el-select v-model="sortValue" placeholder="请选择">
          <el-option
            v-for="item in orderings"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <i class="el-icon-refresh-right"></i>
      </div>
      <div v-if="pattern">
        <el-table
          ref="tagColumn"
          :data="tableData"
          :header-cell-style="{ background: '#f2f2f4' }"
          style="width: 100%; margin-top: 10px"
          class="data-table"
        >
          <el-table-column
            prop="worksDesc"
            label="作品名称"
            show-overflow-tooltip
            width="300"
          >
            <template slot-scope="scope">
              <p
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                "
              >
                {{ scope.row.worksDesc
                }}<template v-for="topic in scope.row.topicList">
                  #{{ topic.topicTitle }}</template
                >
              </p>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="审核状态"
            align="center"
            width="150"
          >
            <template slot-scope="scope">
              {{ scope.row.status | filterStatus }}
            </template>
          </el-table-column>
          <el-table-column
            prop="playCounts"
            label="播放量"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="likeCounts"
            label="点赞量"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="collectCounts"
            label="收藏量"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="commentCounts"
            label="评论量"
            align="center"
            width="150"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="发布时间"
            align="center"
            width="280"
          >
            <template slot-scope="scope">
              {{ scope.row.updateTime | formatDate }}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div
        v-else
        class="card-pattern"
        v-for="item in workCartList"
        :key="item.worksId"
      >
        <div class="card-left"><img :src="item.coverPath" /></div>
        <div class="card-right">
          <div class="card-title">
            <p class="description">{{ item.worksDesc }}<template v-for="topic in item.topicList">
                    #{{ topic.topicTitle }}</template
                  ></p>
            <span>|</span>
            <p class="card-time">{{ item.updateTime | formatDate }}</p>
          </div>
          <el-tag>{{ item.status | filterStatus }}</el-tag>
          <div class="quality">
            <ul>
              <li>
                <div class="quality-index">
                  <p>喜欢指数</p>
                  <el-rate
                    v-model="item.likeExponet"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
                <div class="quality-number">
                  <p>点赞量</p>
                  <span>{{ item.likeCounts }}</span>
                </div>
              </li>
              <li>
                <div class="quality-index">
                  <p>评论指数</p>
                  <el-rate
                    v-model="item.commentExponent"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
                <div class="quality-number">
                  <p>评论量</p>
                  <span>{{ item.commentCounts }}</span>
                </div>
              </li>
              <li>
                <div class="quality-index">
                  <p>收藏指数</p>
                  <el-rate
                    v-model="item.collectExponet"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}"
                  >
                  </el-rate>
                </div>
                <div class="quality-number">
                  <p>收藏量</p>
                  <span>{{ item.collectCounts }}</span>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date";
import { getWorkSummaryApi, getWorkCartListApi } from "@/api/workData";
export default {
  data() {
    return {
      showContent: 1,
      sortValue: "descending",
      salesVolume: [
        "updateTime",
        "playCounts",
        "likeCounts",
        "collectCounts",
        "commentCounts",
      ],
      isSummary: true,
      workCartList: [],
      tableData: [],
      workSummaryList: [],
      orderings: [
        {
          value: "descending",
          label: "降序",
        },
        {
          value: "ascending",
          label: "升序",
        },
      ],
      pattern: true,
      tableData: [],
      mark: 3.7,
    };
  },
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
      //  "yyyy-MM-dd hh:mm:ss"
    },
    filterStatus: function (val) {
      //  请求作品状态：-1：全部作品 0：禁用作品 1：审核通过作品 2：待审核作品 3：未通过作品
      var typeArr = ["已发布", "禁用", "已发布", "审核中", "未通过"];
      return typeArr[val - 1];
    },
    countsFilter(counts) {
      if (counts == "collect_counts") {
        return "收藏最高";
      } else if (counts == "play_counts") {
        return "播放最高";
      } else if (counts == "like_counts") {
        return "点赞最高";
      } else {
        return "评论最多";
      }
    },
  },
  created() {
    this.getWorkSummaryFun();
    this.getWorkCartFun();
  },
  methods: {
    handleRange(tag) {
      this.showContent = tag;
      this.$refs.tagColumn.sort(
        this.salesVolume[this.showContent - 1],
        this.sortValue
      );
    },
    getWorkSummaryFun() {
      getWorkSummaryApi().then((res) => {
        if (res.data.code == 200) {
          this.workSummaryList = res.data.data;
        }
      });
    },
    getWorkCartFun() {
      getWorkCartListApi().then((res) => {
        if (res.data.code == 200) {
          this.workCartList = res.data.data;
          for (let item of this.workCartList){
            item.likeExponent %= 5
            item.collectExponent %= 5
            item.commentExponent %= 5
          }
          this.tableData = this.workCartList;
        }
      });
    },
    changeSummary() {
      this.isSummary = !this.isSummary;
      this.title = "展开查看";
    },
    changePattern() {
      this.pattern = !this.pattern;
    },
    handleClick(row) {
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
.summary ul li {
  display: flex;
}
.production-left img {
  cursor: pointer;
  width: 50px;
  height: 65px;
  border-radius: 10px;
}
.production-right {
  margin-left: 10px;
}
.summary-header,
.table-header {
  display: flex;
  justify-content: space-between;
}
.summary-header .el-button {
  padding: 0;
  color: #bababa;
}

.production-icon,
.production-title {
  display: flex;
}
.production-icon {
  height: 20px;
  margin: 3px 0;
  align-items: center;
}
.production-title {
  height: 20px;
  align-items: center;
}
.play_counts,
.like_counts,
.comment_counts,
.collect_counts {
  font-size: 12px;
  margin-right: 6px;
  padding: 2px;
  box-sizing: border-box;
  border-radius: 5px;
}
.play_counts {
  color: red;
  border: 1.4px solid red;
}
.like_counts {
  color: #ff6b00;
  border: 1.4px solid #ff6b00;
}
.comment_counts {
  border: 1.4px solid #0ecab2;
  color: #0ecab2;
}
.collect_counts {
  color: #309bfe;
  border: 1.4px solid #309bfe;
}
.production-title > div {
  font-size: 14px;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.production-icon > div {
  display: flex;
  font-size: 12px;
  margin-right: 15px;
}
.production-icon > div p {
  color: #707070;
}
.production-icon > div i {
  line-height: 15px;
  font-size: 12px;
  margin-right: 2px;
  border-radius: 90px;
  height: 15px;
  text-align: center;
  width: 15px;
  background: #e8eaf0;
  color: #bababa;
}

.work-table,
.work-summary {
  width: 96%;
  background: #fff;
  margin: auto;
  padding: 15px 20px;
  box-sizing: border-box;
  border-radius: 8px;
}
.work-table {
  margin: 20px auto;
}
.summary ul {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
}
.summary ul li {
  margin: 5px 8px;
  width: 32%;
  border-radius: 8px;
  background: #f7f9fb;
  padding: 12px 10px;
  box-sizing: border-box;
}
.production-time {
  font-size: 13px;
  color: #b9b9b9;
}
.card-pattern {
  background: #f7f9fb;
  width: 98%;
  margin: auto;
  padding: 12px;
  display: flex;
  margin-top: 15px;
  box-sizing: border-box;
  border-radius: 8px;
}
.card-left img {
  width: 110px;
  height: 160px;
  border-radius: 10px;
}
.card-right {
  width: 90%;
  margin-left: 10px;
}
.card-title {
  display: flex;
  color: #858282;
  font-size: 14px;
}
.card-title span {
  margin: 0 8px;
}
.card-right .el-tag {
  background-color: #cbe4fc;
  border: none;
  height: 25px;
  padding: 0 6px;
  margin-top: 12px;
  line-height: 25px;
  font-size: 12px;
}
.quality ul {
  display: flex;
  margin-top: 15px;
  flex-wrap: wrap;
}
.quality ul li {
  width: 31%;
  margin: 0 10px;
  background: #fff;
  height: 90px;
  border: 1px solid red;
  padding: 12px;
  line-height: 1.8;
  box-sizing: border-box;
  border-radius: 8px;
}

.quality-index,
.quality-number {
  display: flex;
  align-items: center;
}
.quality-index p,
.quality-number p {
  margin-right: 3px;
}
.quality-number p {
  font-size: 12px;
  color: #bababa;
}
.quality-number span {
  font-weight: 600;
  color: #939393;
  font-size: 16px;
}

.table-popover .el-button {
  padding: 0;
  border: none;
  color: #c3c3c3;
}
.sort-method .el-button {
  color: #7a7a7a;
  margin-right: 8px;
}
.activeButton {
  color: red !important;
}
.sort-method .el-select .el-input__inner {
  width: 75px;
  border: none;
}
.sort-method i {
  color: #c3c3c3;
  font-weight: bold;
  margin-left: 8px;
  cursor: pointer;
}
.data-tabl e .cell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
</style>
